<!-- 
@name: 首页
-->
<template>
	<div id="personal" class="page">
		<div class="head ">
			<div class="flex-between">
				<div class="flex-row">
					<img object-fit="fill" class="headImg" :src="$store.state.userinfo.photo?$store.state.userinfo.photo:require('@/assets/images/no-pic.jpg')"></img>
					<div class="flex-column">
						<div class="name">{{$store.state.userinfo.name?$store.state.userinfo.name:'未绑定'}}
							<img v-if="$store.state.userinfo.isVip" object-fit="fill" style="height:0.34rem" src='@/assets/images/vip.png'></img>
						</div>
						<div class="phone">{{$store.state.userinfo.mobile}}</div>
					</div>
				</div>
				<div class="exit flex-center" @click="$router.push('/')" v-if="!$store.state.userinfo.idcard">
					<div>马上绑定</div>
				</div>
				<div class="exit flex-center" @click="remove_member" v-if="$store.state.userinfo.idcard">
					<div>解除绑定</div>
				</div>
			</div>
			<div class="flex-between bottom">
				<div>我的积分</div>
				<div @click="$router.push('/personal/integralDetail')" style="font-size:0.32rem">{{$store.state.userinfo.points}}
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<!-- 我的订单 -->
		<div class='whiteWrap'>
			<div class="vendorWrap">
				<div class="flex-between">
					<div class="title">我的订单</div>
					<div class="text2" @click="goOrder()">全部订单
						<van-icon name="arrow" />
					</div>
				</div>
				<div class="iconList ">
					<div class="item flex-column flex-center" @click="goOrder(item)" v-for="item in iconList" :key="item.name">
						<img object-fit="fill" class="" :src='item.icon'></img>
						{{item.name}}
						<div class="info flex-center" v-if="item.num">{{item.num}}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 我的订单 end -->
		<!-- 更多功能 -->
		<div class='whiteWrap'>
			<div class="moreWrap">
				<div class="flex-between">
					<div class="title">更多功能</div>
				</div>
				<div class="iconList ">
					<div class="item flex-column flex-center" @click="jump(item)" v-for="item in moreList" :key="item.name">
						<img object-fit="fill" class="" :src='item.icon'></img>
						{{item.name}}
						<div class="info flex-center" v-if="redPacketLength&&item.name=='积分红包'">{{redPacketLength}}</div>
					</div>

				</div>
			</div>
		</div>
		<!-- 更多功能 end -->
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			iconList: [
				{
					name: '待付款',
					icon: require('@/assets/images/personal/dfk.png'),
					path: '',
					value: 'INIT',
					num: 0,
				},
				{
					name: '待使用',
					icon: require('@/assets/images/personal/dsy.png'),
					path: '',
					value: 'PAID',
					num: 0,
				},
				{
					name: '待评价',
					icon: require('@/assets/images/personal/dpj.png'),
					path: '',
					value: 'WRITTEN_OFF',
					num: 0,
				},
				{
					name: '已完成',
					icon: require('@/assets/images/personal/ywc.png'),
					path: '',
					value: 'COMPLETED',
				},
				{
					name: '退款/售后',
					icon: require('@/assets/images/personal/tksh.png'),
					path: '',
					value: 'REFUND',
				},
			],
			moreList: [
				{
					name: '我的卡券',
					icon: require('@/assets/images/personal/wdkj.png'),
					path: '/order/list',
					value: 'PAID',
					value2: false,
				},
				{
					name: '优惠卷',
					icon: require('@/assets/images/personal/jfhb.png'),
					path: '/personal/coupon',
				},
				{
					name: '积分红包',
					icon: require('@/assets/images/personal/jfhb.png'),
					path: '/personal/redPacket',
				},
				{
					name: '我的分销',
					icon: require('@/assets/images/personal/wdfx.png'),
					path: '/personal/mySubordinate',
				},
				{
					name: '我的收藏',
					icon: require('@/assets/images/personal/wdsc.png'),
					path: '/personal/collect',
				},
				{
					name: '分享专区',
					icon: require('@/assets/images/personal/fxzq.png'),
					path: '/share/list',
				},
				{
					name: '意见反馈',
					icon: require('@/assets/images/personal/yjfk.png'),
					path: '/personal/idea',
				},
				{
					name: '联系客服',
					icon: require('@/assets/images/personal/lxkf.png'),
					path: '/personal/service',
				},
				{
					name: '关于我们',
					icon: require('@/assets/images/personal/gywm.png'),
					path: '/personal/aboutUs',
				},
			],
			redPacketLength: 0,
		};
	},

	created() {
		this.pendingOrderCount_order();
		this.get_member();
		this.redPack_centre();
	},
	mounted() {
		// var btn = document.getElementById('launch-btn');
		// btn.addEventListener('launch', function (e) {
		// 	console.log('success');
		// });
		// btn.addEventListener('error', function (e) {
		// 	console.log('fail', e.detail);
		// });
	},
	methods: {
		remove_member() {
			this.$dialog
				.confirm({
					title: '提示',
					message: '解绑将清除银行积分，确定解绑吗？',
				})
				.then(() => {
					var params = {};
					this.$myApi.remove_member(params).then((res) => {
						if (res.code == 0) {
							this.$toast('解除绑定成功');
							this.get_member();
						} else {
						}
					});
				})
				.catch(() => {
					// on cancel
				});
		},
		redPack_centre() {
			//红包列表
			//
			var params = {
				status: 'INIT',
			};
			this.$myApi.redPack_centre(params).then((res) => {
				if (res.code == 0) {
					this.redPacketLength = res.result.length;
				} else {
				}
			});
		},
		//获取用户信息
		get_member() {
			var params = {};
			this.$myApi.get_member(params).then((res) => {
				if (res.code == 0) {
					this.$store.dispatch('SET_USERINFO', res.result);
				} else {
				}
			});
		},
		pendingOrderCount_order() {
			this.$myApi.pendingOrderCount_order().then((res) => {
				if (res.code == 0) {
					this.iconList[0].num = res.result.INIT;
					this.iconList[1].num = res.result.PAID;
					this.iconList[2].num = res.result.WRITTEN_OFF;
				} else {
				}
			});
		},
		jump(item = {}) {
			this.$router.push({
				path: item.path,
				query: { status: item.value, value2: item.value2 },
			});
		},
		goOrder(item = {}) {
			this.$router.push({
				path: '/order/list',
				query: { status: item.value },
			});
		},
		clear_searchHistoryList() {
			this.searchHistoryList = [];
		},
		onSearch() {},
		onCancel() {},
	},
};
</script>
<style lang="less">
#personal {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;
	padding-top: 0;
	.moreWrap {
		.iconList {
			display: grid;
			grid-template-columns: repeat(4, 25%);
			margin-top: 0.3rem;

			.item {
				font-size: 0.24rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-bottom: 0.4rem;

				position: relative;
				img {
					margin-bottom: 0.1rem;
					height: 0.54rem;
					width: 0.54rem;
				}
				.info {
					position: absolute;
					left: 0.9rem;
					background: red;
					// padding: 0.03rem 0.06rem;
					height: 0.35rem;
					width: 0.35rem;
					border-radius: 100%;
					top: 0;
					font-size: 0.2rem;
					color: #fff;
				}
			}
		}
	}
	.vendorWrap {
		.iconList {
			display: grid;
			grid-template-columns: repeat(5, 20%);
			.item {
				font-size: 0.24rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				position: relative;
				img {
					margin-bottom: 0.1rem;
					height: 0.54rem;
					width: 0.54rem;
				}
				.info {
					position: absolute;
					left: 0.8rem;
					background: red;
					// padding: 0.03rem 0.06rem;
					height: 0.35rem;
					width: 0.35rem;
					border-radius: 100%;
					top: 0;
					font-size: 0.2rem;
					color: #fff;
				}
			}
		}
	}
	.whiteWrap {
		width: 7rem;
		padding: 0.24rem 0.16rem;
		margin-left: 0.25rem;
		background: #fff;
		position: relative;
		box-sizing: border-box;
		margin-top: 0.2rem;
		.title {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text2 {
			font-size: 0.26rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	.head {
		height: 2.65rem;
		width: 7.5rem;
		background: #fff url('~@/assets/images/personal/tbbj.png') top center
			no-repeat;
		background-size: 100% auto;
		.headImg {
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			margin: 0.32rem 0.24rem 0.24rem 0.24rem;
		}
		.name {
			font-size: 0.34rem;
			font-weight: bold;
			color: #000000;
			margin-top: 0.32rem;
			margin-bottom: 0.15rem;
		}
		.phone {
			width: 1.7rem;
			height: 0.22rem;
			font-size: 0.28rem;
			font-weight: 500;
			color: #666666;
		}
		.exit {
			width: 1.2rem;
			height: 0.48rem;
			margin-top: 0.52rem;
			background: rgb(255, 150, 0);
			border-radius: 20px 0rem 0rem 20px;
			font-size: 0.2rem;
			color: #fff;
			padding-bottom: 0.05rem;
			// padding-top: 0.1rem;
		}
		.bottom {
			padding: 0 0.5rem;
			margin-top: 0.35rem;
			font-size: 0.24rem;
			font-weight: bold;
			color: #ffddb9;
		}
	}
}
</style>
<style lang="less" scoped>
/deep/.van-tab {
	flex: 0 1 auto;
	width: 1rem;
	font-size: 0.32rem;
}
</style>